<template></template>

<script setup lang="ts">
import { fireInsuranceStore } from '@/pages/forestry/store/store'
const fireStore = fireInsuranceStore()
import apiList from '@/pages/forestry/api/api'
import * as L from 'leaflet'

let point = []

const baseMap = inject('baseMap')

const layer = L.layerGroup().addTo(toRaw(baseMap.value))

const handleInitMap = () => {
  let marker
  point.geometries.forEach(item => {
    item.marker = null
    marker = L.marker(item.properties.centroid, {
      icon: L.divIcon({
        className: 'my-div-icon',
        html: `<div class="city-point">
                <p class="city-point-label">${item.properties.name}</p>
          </div>`
      })
    })
    layer.addLayer(marker)
  })
}
let linquJson = ref({
  type: 'GeometryCollection',
  geometries: []
})
onMounted(() => {
  apiList.getForestBureauArea().then(res => {
    if (res.code == 200) {
      for (let item of res.data) {
        var avgLongitude =
          item.coordinateArray[0].reduce((sum, point) => sum + point[0], 0) /
          item.coordinateArray[0].length
        var avgLatitude =
          item.coordinateArray[0].reduce((sum, point) => sum + point[1], 0) /
          item.coordinateArray[0].length
        linquJson.value.geometries.push({
          type: 'Polygon',
          coordinates: item.coordinateArray,
          bureauDetail: item.bureauDetail,
          properties: {
            centroid: [avgLatitude, avgLongitude],
            name: item.bureauDetail.split(',')[0]
          }
        })
      }
      point = linquJson.value
      handleInitMap()
    }
  })
})

onUnmounted(() => {
  point = []
  toRaw(baseMap.value).removeLayer(layer)
})
</script>

<style lang="scss">
.city-point {
  display: flex;
  align-items: center;
  flex-direction: column;

  .city-point-label {
    white-space: nowrap;
    font-size: 8px;
    font-weight: bold;
    color: #fff;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
  }
  img {
    width: 20px;
    height: 20px;
  }
}
</style>
